<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: item.path }" v-for="item in bread" :key="item.path">
            {{ item.meta.title }}
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script setup lang="ts">
// 导入 ref、watch 函数
import { ref, watch } from 'vue'
// 导入 useRoute 函数
import { useRoute, type RouteLocationMatched } from 'vue-router'
let route = useRoute()
// 定义变量，存储面包屑导航信息
let bread = ref([] as RouteLocationMatched[])
// 侦听路由变化
watch(route, (val) => {
    // console.log(val.matched)
    bread.value = val.matched
}, {
    immediate: true, // 立即侦听
    deep: true // 深度侦听
})
</script>

<style scoped></style>